<template>
  <scroll-view class="main" :style="mainStyle" :scroll-y="true">
    <scroll-view :scroll-x="true">
      <view class="list flex">
        <view @click="proxy.$utils.toLink(`/packagePages/user/details?id=${item.userId}`)" class="box shrink lifePhotos topBox" v-for="(item,index) in list2" :key="index">
          <image :src="item.logo" mode="scaleToFill" />
          <view class="vip">VIP</view>
          <view class="info">
            <view class="name fz14">{{item.nickName}}</view>
            <view class="desc flex">
              <view class="age">{{item.age}}岁</view>
              <view class="height">{{item.height}}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <scroll-view :scroll-y="true">
      <view class="item" v-for="(item, index) in list" :key="index" @click="proxy.$utils.toLink(`/packagePages/user/details?id=${item.userId}`)">
        <view class="top flex alignCenter">
          <uv-avatar :src="item.logo" size="46" shape="circle"></uv-avatar>
          <view class="info">
            <view class="name">{{item.nickName}}</view>
            <view class="types flex">
              <view class="sex flex alignCenter" :style="sexStyle(item.sex)">
                <view class="icon">
                  <uv-icon name="man" color="#fff" size="12"></uv-icon>
                </view>
                <view class="age fz12">{{item.age}}</view>
              </view>
              <view class="star flex alignCenter">
                <text class="icon">
                  <image :src="item.constellationLogo" mode="widthFix" />
                </text>
                {{item.constellation}}
              </view>
              <view class="matching">
                匹配度 {{item.matchingDegree}}%
              </view>
            </view>
          </view>
        </view>

        <view class="middle flex" v-if="item.oneselfTags">
          <view class="tag" v-for="e in item.oneselfTags.split(',')" :key="e">{{e}}</view>
        </view>

        <view class="bottom flex">
          <view class="list flex grids gridColumns3 Photos">
            <view class="box shrink lifePhotos" v-for="(i,idx) in item.lifePhotos.slice(0, 3)" :key="idx">
              <image :src="i" mode="scaleToFill" @click.stop="proxy.$auth.previewImage(item.lifePhotos,idx)" />
            </view>
          </view>
          <view class="flex alignCenter">
            <view class="seeMore" v-if="item.lifePhotos.length > 3">
              <view>查</view>
              <view>看</view>
              <view>更</view>
              <view>多</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </scroll-view>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let sexStyle = (sex) => {
  return {
    background: sex == "1" ? "#4990FF" : "#FF67A6",
  };
};

let list = ref([]);
let list2 = ref([]);
let matchingDegree = ref(0);

let mainStyle = computed(() => {
  return {
    height: `${counter.slParams.homeContentHeight - 25}px`,
  };
});

onMounted(() => {
  getInfo();
});

let getInfo = async () => {
  let data = await proxy.$apis.getTodayGoodFate();
  data.forEach((element) => {
    if (element.pushType == 1) {
      list.value.push(element);
    } else {
      list2.value.push(element);
    }
  });
  console.log("list.value", list.value);
  console.log("list2.value", list2.value);
};
</script>



<style lang="scss" scoped>
.main {
  width: calc(100% - 30px);
  margin: 15px auto 0;
}
.main::-webkit-scrollbar {
  display: none;
}
.list::-webkit-scrollbar {
  display: none;
}
.seeMore {
  color: #999;
  font-size: 12px;
  padding-left: 10px;
}
.Photos {
  gap: 0 5px; //上下间距 左右间距
}
.list {
  //overflow-x: auto;
  .lifePhotos {
    aspect-ratio: 1/1;
  }
  .topBox {
    width: 105px;
    height: 128px;
    margin-right: 10px;
  }
  .box {
    position: relative;
    image {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 5px;
      filter: brightness(70%) contrast(85%);
    }
    .vip {
      position: absolute;
      border-radius: 5px 0 5px 0;
      background-color: #f93b9b;
      top: 0;
      left: 0;
      font-size: 10px;
      padding: 1px 12px;
      color: white;
    }
    .info {
      position: absolute;
      left: 9px;
      bottom: 5px;
      color: white;
      .name {
        margin-bottom: 5px;
      }
      .desc {
        font-size: 12px;
        .age {
          margin-right: 5px;
        }
      }
    }
  }
}

.item {
  border-radius: 15px;
  background-color: white;
  box-shadow: 0 2px 9px 1px rgba(0, 0, 0, 0.14);
  margin-top: 20px;
  padding: 10px 13px;
  border: 0.5px solid rgba(0, 0, 0, 0.14);
  .top {
    .info {
      margin-left: 13px;
      .name {
        color: #333333;
        font-size: 10px;
      }
      .types {
        margin-top: 5px;
        .sex {
          color: white;
          font-size: 8px;
          border-radius: 11px;
          padding: 3px 6px;
          margin-right: 5px;
          .icon {
            width: 10px;
            margin-right: 4px;
          }
        }
        .star {
          background-color: #cee9ff;
          border-radius: 11px;
          color: #333333;
          font-size: 12px;
          margin-right: 5px;
          padding: 3px 6px;
          .icon {
            width: 10px;
            image {
              width: 100%;
              display: block;
            }
          }
        }
        .matching {
          background: linear-gradient(to right, #ffa0d2, #4439ff);
          border-radius: 11px;
          color: #fff;
          font-size: 12px;
          margin-right: 5px;
          padding: 3px 6px;
        }
      }
    }
  }
  .middle {
    margin: 8px 0 10px;
    .tag {
      border: 1px solid #baa3fe;
      border-radius: 12px;
      color: #b4a1ff;
      font-size: 10px;
      margin-right: 8px;
      margin-bottom: 8px;
      padding: 4px 8px;
    }
  }
}
</style>
